<template>
  <div class="dllxt">
    <div class="top-nav"></div>
    <div class="dllxt-content">
      <!-- <div class="station-line">
        <ul>
          <li
            v-for="e in stationList"
            :key="e.id"
            :class="currentStation === e.stationName ? 'active' : ''"
            @click="stationClick(e)"
          >
            <span class="active-son">{{ e.stationName }}</span>
          </li>
        </ul>
        <div class="card" v-if="currentStation">
          <div class="station-name">{{ currentStation }}</div>
          <div class="data-list">
            <div class="item">
              <div class="i-num">4402.21</div>
              <div class="i-name">环控功率(kW)</div>
            </div>
            <div class="item">
              <div class="i-num">2752.54</div>
              <div class="i-name">照明功率(kW)</div>
            </div>
            <div class="item">
              <div class="i-num">479.43</div>
              <div class="i-name">冷水机功率(kW)</div>
            </div>
            <div class="item">
              <div class="i-num">3032.10</div>
              <div class="i-name">空调功率(kW)</div>
            </div>
            <div class="item">
              <div class="i-num">197.47</div>
              <div class="i-name">商业功率(kW)</div>
            </div>
            <div class="item">
              <div class="i-num">559.17</div>
              <div class="i-name">其他功率(kW)</div>
            </div>
          </div>
        </div>
      </div> -->
      <div id="dllxt-topology"></div>
    </div>
  </div>
</template>
<script>
import { Topology } from "@topology/core";
import { searchStaionList } from "../../api/base8090.js";
import { passDeptIdQueryDrawingInfo } from "../../api/base9534.js";
// import dataJson from "./picdata1.json";
export default {
  data() {
    return {
      // picData: dataJson,
      dataJson:{},
      stationList: [],
      currentStation: "",
      queryParmas: {
        stationCode: sessionStorage.getItem("stationCode"),
      },
    };
  },
  async created() {
    // this.init();
    this.initData();
  },
  methods: {
    init() {
      searchStaionList().then((res) => {
        this.$set(this, "stationList", res.data);
      });
    },
    stationClick(param) {
      if (this.currentStation === param.stationName) {
        this.$set(this, "currentStation", "");
      } else {
        this.$set(this, "currentStation", param.stationName);
      }
    },
    async initData() {
      this.loading = true;
      this.dataJson = {};
      let resData = await passDeptIdQueryDrawingInfo(this.queryParmas);
      this.dataJson = resData.data[0].pdata;
      const center12 = new Topology("dllxt-topology");

      if (Object.keys(resData.data[0].pdata).length) {
        center12.open(this.dataJson);
        center12.fitView(12);
        this.loading = false;

        center12.on("s1", (e) => {
          console.log(e);
        });
      } else {
        this.$message.success("此车站暂无图纸数据！");
        setTimeout(() => {
          this.loading = false;
        }, 100);
      }
    },
  },
  mounted() {
    // const center12 = new Topology("dllxt-topology");
    // center12.open(this.picData);
    // center12.fitView(12);
    // if (Object.keys(resData.data[0].pdata).length) {
    //   center12.open(this.picData);
    //   center12.fitView(12);
    //   this.loading = false;

    //   center12.on("s1", (e) => {
    //     console.log(e);
    //   });
    // } else {
    //   this.$message.success("此车站暂无图纸数据！");
    //   setTimeout(() => {
    //     this.loading = false;
    //   }, 100);
    // }
  },
};
</script>
<style lang="less" scoped>
.dllxt {
  width: 100%;
  height: 100%;

  .top-nav {
    width: 100%;
    height: 0.41rem;
  }
  .dllxt-content {
    width: 100%;
    height: calc(100% - 0.41rem);

    .station-line {
      width: 100%;
      height: 180px;
      position: relative;

      ul {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 180px;
      }

      ul::before {
        content: "";
        position: absolute;
        top: 12px;
        width: 76%;
        height: 6px;
        z-index: 1;
        background: linear-gradient(
            135deg,
            transparent,
            transparent 45%,
            #2a6697,
            transparent 55%,
            transparent 100%
          ),
          linear-gradient(
            45deg,
            transparent,
            transparent 45%,
            #2a6697,
            transparent 55%,
            transparent 100%
          );
        background-size: 8px 8px;
        background-repeat: repeat-x, repeat-x;
      }

      li {
        font-size: 16px;
        color: #2a6697;
        width: 30px;
        text-align: center;
        //
        cursor: pointer;
        z-index: 2;

        .active-son {
          padding-top: 28px;
          display: block;
          background: url("~@img/stationPoint.png") no-repeat top center;
          background-size: 100% auto;
        }
      }

      li.active {
        .active-son {
          display: block;
          background: url("~@img/stationPoint_.png") no-repeat top center;
          background-size: 100% auto;
          color: #06ffff;
          border: 1px solid #06ffff;
          border-radius: 5px;
        }
      }

      li + li {
        margin-left: 14px;
      }
      .card {
        position: absolute;
        width: 289px;
        height: 279px;
        top: 90%;
        left: 50%;
        z-index: 666;
        transform: translateX(-50%);
        background: url("~@img/tk.png") no-repeat;
        background-size: 100% 100%;
        padding: 30px 17px 20px;
        display: flex;
        flex-flow: column;
        justify-content: space-around;

        .station-name {
          color: #06ffff;
          font-size: 20px;
          font-weight: 600;
          padding-left: 20px;
        }

        .data-list {
          flex-basis: 80%;
          width: 100%;
          display: flex;
          flex-flow: row wrap;

          .item {
            flex-basis: 50%;

            .i-num {
              color: #06ffff;
              font-size: 16px;
              text-align: center;
              line-height: 28px;
            }

            .i-name {
              color: #fff;
              font-size: 14px;
              text-align: center;
            }
          }
        }
      }
    }
    #dllxt-topology {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      // background-color: #73972a;
    }
  }
}
</style>
